<script setup>
import { computed, ref } from 'vue'
import { getPodListHandler ,deletePodHandler} from '../../../api/pod'
import { ElMessage,ElMessageBox  } from 'element-plus'
import { obj2Yaml } from '../../../utils/utils'
// import '../../assets/iconfont/customIconfont.css'
const props = defineProps({
    buttonName: {
        type: String,
        default: "查看"
    },
    clusterId: {
        type: String,
    },
    namespace:{
        type: String,
    },
    fieldSelector: {
        type: String,
    },
    labelSelectorObj: {
        type: Object,
    },
    resourceType: {
        type: String,
    },
    resourceName: {
        type: String,
    },
    buttonTitle: {
        type: String,
        default:'查看Pod列表'
    },
    buttonType:{
        type: String,
        default:'primary'
    }

})
let items = ref([])
const visible = ref(false)
const getPodList = async ()=>{
     //获取Pod列表
    //需要把labelSelectorObj转换成字符串,labelSelectorObj是一个对象.labelSelector
    let labelSelector = ""
    if(props.labelSelectorObj != null){
        let labelSelectorList = []
        for(let [key,value] of Object.entries(props.labelSelectorObj)){
            const KeyValueString = `${key}=${value}`
            labelSelectorList.push(KeyValueString)
        }
        labelSelector = labelSelectorList.join(',')
    }
    console.log("labelSelector:",labelSelector)
    await getPodListHandler(props.clusterId, 
    props.namespace, 
    labelSelector, 
    props.fieldSelector).then(res => {
        items.value = res.data.data.items
        console.log("获取Pod列表:",items.value)
    })
}
const showPods = async () => {
    getPodList()
    visible.value = true
}
const getContainerStatus = computed(()=> (containerName,containerStatuses)=>{
    if (containerStatuses == undefined){
        return false
    }
    for (let i=0;i<containerStatuses.length;i++){
        const status = containerStatuses[i]
        if (status.name == containerName){
            return status.ready
        }
    }
})
const deletePod = (namespace,name,force) =>{
  ElMessageBox.confirm(
    `你确定要删除命名空间: ${namespace} Pod: ${name}吗？`,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deletePodHandler(props.clusterId, namespace, name, force).then(
        (res) => {
          ElMessage({
              message: res.data.message,
              type: 'warning',
          })
          getPodList()
        }
      )
    })
    .catch(() => {
      return
    })
}
</script>

<template>
    <el-button :title="props.buttonTitle" :type="props.buttonType" link @click="showPods"> {{ props.buttonName }}</el-button>
    <el-dialog append-to-body width="70%" center draggable v-model="visible">
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <div :id="titleId" :class="titleClass" style="margin: 10px auto 0 auto;">
                  <el-tag  class="el-tag" size="large" title="集群">
                    {{ props.clusterId }}
                  </el-tag>
                  >
                  <el-tag class="el-tag"  size="large" title="类型">
                    {{ props.resourceType }}
                  </el-tag>
                  >
                  <el-tag class="el-tag"  size="large" title="资源名称">
                    {{ props.resourceName }}
                  </el-tag>
                </div>
            </div>
        </template>
        <div class="auto-layout" style=" height: 400px; overflow-y: auto;">
            <div :key="pod.metadata.name" v-for="pod in items">
                <el-card style="width: 380px; height: 320px;">
                    <template #header>
                        <div class="auto-space-between" style="height: 32px;">
                            <div>
                                <span title="Pod名称" style="font-size: 20px;">{{ pod.metadata.name }}</span>
                                <span style="display: block; font-size: 12px;" title="创建时间">{{ pod.metadata.creationTimestamp }}</span>
                            </div>
                            <div>
                                <el-button v-if="!pod.metadata.deletionTimestamp" type="warning" link @click="deletePod(pod.metadata.namespace,pod.metadata.name,false)">删除</el-button>
                                <el-button v-else link type="warning" @click="deletePod(pod.metadata.namespace,pod.metadata.name, true)">强制删除</el-button>
                            </div>
                        </div>
                    </template>
                    <div>
                        <!-- 展示namespace和状态 -->
                        <div class="auto-space-between" style="height: 10px;">
                            <div>
                                <el-button :type="pod.status.phase=='Running'?'success':'warning'" title="pod运行状态展示">
                                    <i class=" iconfont icon-Status" style="margin-right: 10px; font-size: 20px;"></i>
                                    <span> {{ pod.status.phase }}</span>
                                </el-button>
                            </div>
                            <div>
                                <el-button type="primary" title="pod所在的命名空间" >
                                    <i class=" iconfont icon-Namespace" style="margin-right: 10px; font-size: 20px;"></i>
                                    <span> {{ pod.metadata.namespace }}</span>
                                </el-button>
                            </div>
                        </div>
                        <!-- 展示所有的容器 -->
                        <div>
                            <div class="auto-layout">
                                <div style="height: 48px; overflow-y: auto;">
                                    <el-button :type="getContainerStatus(c.name,pod.status.containerStatuses)?'success':'danger'" title="容器" :key="c.name" v-for="(c,index) in pod.spec.containers" style="margin-top: 5px;">
                                        <i class=" iconfont icon-rongqifuwuContainerServi" style="margin-right: 10px; font-size: 20px;"></i>
                                        <span> {{ c.name }}</span>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </el-dialog>
</template>

<style scoped>
.el-tag {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 20px;
}
</style>
